<template>
	<view>
		<image src="https://resource.lanbaozixun.com/uploads/images/20241210094527a661d7297.jpg" mode="widthFix"
			class="bg"></image>
		<view class="main-content-area bg-white u-border-radius-10 u-padding-top-20">
			<view class="u-text-center hint-area u-padding-bottom-20">
				<view class="u-padding-top-10 xl bold u-flex u-row-center">
					<u-icon name="file-text" size="34"></u-icon>
					<text class="u-padding-left-5">申请人情况简述</text>
				</view>
				<text class="u-padding-top-10 xs u-type-info-disabled">请简单描述申请人情况，提交后商务第一时间与您联系</text>
			</view>

			<u-form :model="form" ref="uForm" class="u-padding-left-30 u-padding-right-30">
				<u-form-item :border-bottom="false" label-position="top">
					<template #label>
						<view class="u-flex u-row-center lable-area">
							<text class="md bold">申请人城市</text>
							<text class="u-type-error bold u-padding-top-5 u-padding-left-5">*</text>
						</view>
					</template>
					<view class="input-area">
						<u-input placeholder="请选择申请人城市" type="select" v-model="city" @click="showAreaSelect = true" />
					</view>
				</u-form-item>
				<u-form-item :border-bottom="false" label-position="top">
					<template #label>
						<view class="u-flex u-row-center lable-area">
							<text class="md bold">申请人年龄</text>
							<text class="u-type-error bold u-padding-top-5 u-padding-left-5">*</text>
						</view>
					</template>
					<view class="input-area">
						<u-input placeholder="请选择申请人年龄" type="select" v-model="form.age"
							@click="showAgeSelect = true" />
					</view>
				</u-form-item>
				<u-form-item :border-bottom="false" label-position="top">
					<template #label>
						<view class="u-flex u-row-center lable-area">
							<text class="md bold">申请人资产情况</text>
							<text class="u-type-error bold u-padding-top-5 u-padding-left-5">*</text>
						</view>
					</template>
					<view class="input-area">
						<u-input :height="200" placeholder="请填写申请人资产情况" type="textarea"
							v-model="form.balance_situation" />
					</view>
				</u-form-item>
				<u-form-item :border-bottom="false" label-position="top">
					<template #label>
						<view class="u-flex u-row-center lable-area">
							<text class="md bold">申请人征信情况</text>
							<text class="u-type-error bold u-padding-top-5 u-padding-left-5">*</text>
						</view>
					</template>
					<view class="input-area">
						<u-input :height="200" placeholder="请填写申请人征信情况" type="textarea"
							v-model="form.credit_information" />
					</view>
				</u-form-item>
				<u-form-item :border-bottom="false" label-position="top">
					<template #label>
						<view class="u-flex u-row-center lable-area">
							<text class="md bold">填写您的手机号码</text>
							<text class="u-type-error bold u-padding-top-5 u-padding-left-5">*</text>
						</view>
					</template>
					<view class="input-area">
						<u-input placeholder="请填写您的手机号码" type="text" v-model="form.phone" />
					</view>
				</u-form-item>
				<u-form-item :border-bottom="false" label-position="top">
					<template #label>
						<view class="u-flex u-row-center lable-area">
							<text class="md bold">补充信息</text>
							<text class="u-type-error bold u-padding-top-5 u-padding-left-5">*</text>
						</view>
					</template>
					<view class="input-area">
						<u-input :height="200" placeholder="描述申请人情况,例:申请人征信有逾期,开票200多万,总资金缺口300万,那个产品能做能审"
							type="textarea" v-model="form.additional_information" />
					</view>
				</u-form-item>
			</u-form>

			<view class="footer-area u-padding-20">
				<u-button :hair-line="false" :custom-style="{
					color:'white',
					borderColor:'transparent',
					background:'linear-gradient(90deg, #6BB2FF 0%, #2C60DE 100%)'
				}" size="default" hover-class="none" @click="submitDatas">
					提交
				</u-button>
			</view>
		</view>
		<u-select v-model="showAgeSelect" @confirm="selectAge" :list="ageLists"></u-select>
		<u-select v-model="showAreaSelect" mode="mutil-column-auto" @confirm="selectCity" :list="showArea"></u-select>
	</view>
</template>

<script>
	import {
		answerQuestions
	} from "@/yixu/api/network_square"
	import area from '@/utils/area'
	export default {
		data() {
			return {
				ageLists: [{
					label: '18岁以下'
				}, {
					label: '18-25岁'
				}, {
					label: '26-30岁'
				}, {
					label: '31-40岁'
				}, {
					label: '41-50岁'
				}, {
					label: '51-60岁'
				}, {
					label: '60岁以上'
				}],
				showAgeSelect: false,
				city: '',
				showArea: [],
				showAreaSelect: false,
				form: {
					province_id: '',
					city_id: '',
					age: '',
					balance_situation: '',
					credit_information: '',
					phone: '',
					additional_information: '',
				}
			}
		},
		onLoad({edit}) {
			if(edit){
				let item = uni.getStorageSync('consulting_expert_item');
				this.form.id = item.id;
				this.form.province_id = item.company_city_id;
				this.form.city_id = item.city_id;
				this.form.age = item.age;
				this.city= item.city;
				this.form.balance_situation = item.balance_situation;
				this.form.credit_information = item.credit_information;
				this.form.phone = item.phone;
				this.form.additional_information = item.additional_information;
			}
			let showArea = this.$u.deepClone(area);

			showArea.forEach(({
				children
			}) => {
				children.forEach(item => {
					delete item.children;
				});
			});
			this.showArea = showArea;
		},
		methods: {
			selectAge(e) {
				this.form.age = e[0].label;
			},
			selectCity(e) {
				this.form.province_id = e[0].value;
				this.form.city_id = e[1].value;
				this.city = e[1].label;
			},
			async submitDatas() {
				const _this = this;
				try {
					const verifyDatas = {
						province_id: '请选择申请人城市',
						age: '请选择申请人年龄',
						balance_situation: '请输入申请人资产情况',
						credit_information: '请输入申请人征信情况',
						phone: '请输入您的手机号码',
						additional_information: '请输入补充信息',
					}

					Object.keys(verifyDatas).forEach((item) => {
						if (_this.$u.test.isEmpty(_this.form[item]))throw new Error(verifyDatas[item]);
					});
					
					if (!_this.$u.test.mobile(_this.form.phone))throw new Error('请检查您的手机号码');
					
					let r = await answerQuestions({..._this.form});
					
					if(r.code != 1)return;
					
					_this.$u.toast(r.msg);
					
					setTimeout(()=>{
						uni.redirectTo({
							url:'/yixu/pages/network_square/my_business_card/index'
						})
					},500)
				} catch (e) {
					// 消息提醒
					_this.$u.toast(e.message);
				}

			}
		}
	}
</script>

<style lang="scss" scoped>
	.bg {
		width: 100vw;
		height: 300rpx;
	}

	.main-content-area {
		z-index: 1;
		position: relative;
		margin-top: -30rpx;

		.hint-area {
			border-bottom: 2rpx dotted #f4f4f5;
		}

		.lable-area {
			position: relative;
			padding-left: 18rpx;

			&::before {
				left: 0;
				content: '';
				height: 35%;
				width: 8rpx;
				position: absolute;
				background: $-color-primary;
				border-radius: 10rpx;
			}
		}

		.input-area {
			width: 100%;
			padding: 0 20rpx;
			border-radius: 10rpx;
			background: rgb(245, 245, 245);
		}
	}
</style>